<template>
    <div class="app-container">
        <div class="Search">
            <!--工具条-->
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="query">
                                           
                         <el-form-item v-has="'PLATFROM_TENANT_QUERY'">
                <el-cascader  ref="tenantTree" placeholder="所属租户" :props="tenantProps" :options="tenantOptions" @change="selectTenant" clearable collapse-tags filterable></el-cascader>
            </el-form-item>

             <el-form-item>
                 <el-cascader ref="organTree" placeholder="所属组织" :props="props" :options="organOptions" @change="selectOrgan" collapse-tags clearable filterable></el-cascader>
            </el-form-item>
                 <el-form-item>
                    <el-select
                            v-model="query.params.merchantId"
                            filterable
                            remote
                            reserve-keyword
                            clearable
                            placeholder="请输入商户名称搜索选择"
                            :remote-method="remoteMethod"
                            :loading="loading">
                            <el-option
                              v-for="item in query.merchantOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                </el-form-item>
                                
                <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData">查询</el-button>
                </el-form-item>
                <el-form-item>
                <el-button type="success" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        </div>

        <div class="block">
            <el-table
                    v-loading="listLoading"
                    :data="list"
                    element-loading-text="Loading"
                    border
                    fit
                    highlight-current-row
            >
                <el-table-column align="center" label="序号" width="95">
                    <template slot-scope="scope">
                        {{ scope.$index }}
                    </template>
                </el-table-column>
                </el-table-column>
                <el-table-column label="平台商编" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.firstClassMerchantNo }}
                    </template>
                </el-table-column>
                <el-table-column label="所属组织" width="110">
                <template slot-scope="scope">
                {{ scope.row.organId }}
                </template>
                </el-table-column>
                <el-table-column label="所属组织名称" width="110">
                <template slot-scope="scope">
                {{ scope.row.organName }}
                </template>
                </el-table-column>
                <el-table-column label="所属商户" width="110">
                <template slot-scope="scope">
                {{ scope.row.merchantId }}
                </template>
                </el-table-column>

                <el-table-column label="服务费比率(%)" width="110">
                <template slot-scope="scope">
                {{ scope.row.feeValueRate }}
                </template>
                </el-table-column>
                <el-table-column label="最低费率金额(元)" width="110">
                <template slot-scope="scope">
                {{ scope.row.minFee }}
                </template>
                </el-table-column>

                <el-table-column label="分账产品的签名密钥" width="110">
                <template slot-scope="scope">
                {{ scope.row.tradeSignKey }}
                </template>
                </el-table-column>
                <el-table-column label="分账产品的加密密钥" width="110">
                <template slot-scope="scope">
                {{ scope.row.tradeEncodeKey }}
                </template>
                </el-table-column>
                <el-table-column label="结算产品的签名密钥" width="110">
                <template slot-scope="scope">
                {{ scope.row.settlementSignKey }}
                </template>
                </el-table-column>
                <el-table-column label="结算产品的加密密钥" width="110">
                <template slot-scope="scope">
                {{ scope.row.settlementEncodeKey }}
                </template>
                </el-table-column>
                <el-table-column label="扫码产品的加密密钥" width="110">
                <template slot-scope="scope">
                {{ scope.row.scanSignKey }}
                </template>
                </el-table-column>
                <el-table-column label="扫码产品的签名密钥" width="110">
                <template slot-scope="scope">
                {{ scope.row.scanEncodeKey }}
                </template>
                </el-table-column>
                <el-table-column label="公共产品产品的签名密钥" width="110">
                <template slot-scope="scope">
                {{ scope.row.publicSignKey }}
                </template>
                </el-table-column>
                <el-table-column label="公共产品产品的加密密钥" width="110">
                <template slot-scope="scope">
                {{ scope.row.publicEncodeKey }}
                </template>
                </el-table-column>
                <el-table-column label="支付中心的签名密钥" width="110">
                <template slot-scope="scope">
                {{ scope.row.payCenterSignKey }}
                </template>
                </el-table-column>
                <el-table-column label="支付中心的加密密钥" width="110">
                <template slot-scope="scope">
                {{ scope.row.payCenterEncodeKey }}
                </template>
                </el-table-column>
                <el-table-column label="是否引用父组织配置" width="110">
                <template slot-scope="scope">
                {{ scope.row.isReferenceToParent }}
                </template>
                </el-table-column>
                <el-table-column label="是否已删除" width="110">
                <template slot-scope="scope">
                {{ scope.row.isDeleted }}
                </template>
                </el-table-column>
                <el-table-column label="备注" width="110">
                <template slot-scope="scope">
                {{ scope.row.remark }}
                </template>
                </el-table-column>

                <el-table-column align="center" prop="created_at" label="操作" width="200">
                    <template slot-scope="scope">
                        <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="handleEdit(scope.$index, scope.row)">
                          {{ scope.row.isSet?'保存':"修改" }}
                        </span>
                        <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="handleDelete(scope.$index, scope.row)">
                          删除
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="block">
            <el-pagination
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

        <div class="block">
            <!--弹框-->
            <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible">
                <el-form :model="form">

                    <el-form-item  v-if="addForVisible"  label="主键">
                        <el-input v-model="form.id" placeholder="主键"  auto-complete="off"/>
                    </el-form-item>
                     <el-form-item label="平台商编">
                        <el-input v-model="form.firstClassMerchantNo" placeholder="平台商编"  auto-complete="off"/>
                    </el-form-item>

                    <el-form-item label="所属商户">

                        <el-select
                            v-model="form.merchantId"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入关键词"
                            :remote-method="remoteMethod"
                            :loading="loading">
                            <el-option
                              v-for="item in query.merchantOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>

                    </el-form-item>

                   <el-form-item label="分润比率(%)">
                        <el-input v-model="form.feeValueRate" placeholder="分润比率(%)"  auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="最低费率金额(元)">
                        <el-input v-model="form.minFee" placeholder="最低费率金额(元)"  auto-complete="off"/>
                    </el-form-item>


                    <el-form-item label="分账产品的签名密钥">
                        <el-input v-model="form.tradeSignKey" placeholder="分账产品的签名密钥"  auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="分账产品的加密密钥">
                        <el-input v-model="form.tradeEncodeKey" placeholder="分账产品的加密密钥"  auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="结算产品的签名密钥">
                        <el-input v-model="form.settlementSignKey" placeholder="结算产品的签名密钥"  auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="结算产品的加密密钥">
                        <el-input v-model="form.settlementEncodeKey" placeholder="结算产品的加密密钥"  auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="扫码产品的加密密钥">
                        <el-input v-model="form.scanSignKey" placeholder="扫码产品的加密密钥"  auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="扫码产品的签名密钥">
                        <el-input v-model="form.scanEncodeKey" placeholder="扫码产品的签名密钥"  auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="公共产品产品的签名密钥">
                        <el-input v-model="form.publicSignKey" placeholder="公共产品产品的签名密钥"  auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="公共产品产品的加密密钥">
                        <el-input v-model="form.publicEncodeKey" placeholder="公共产品产品的加密密钥"  auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="支付中心的签名密钥">
                        <el-input v-model="form.payCenterSignKey" placeholder="支付中心的签名密钥"  auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="支付中心的加密密钥">
                        <el-input v-model="form.payCenterEncodeKey" placeholder="支付中心的加密密钥"  auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="form.remark" placeholder="备注"  auto-complete="off"/>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleEditSave">确 定</el-button>
                </div>
        </el-dialog>
        </div></div>
    </div>

</template>

<script>
    import { getList, doDelete, doEdit } from '@/api/MerchantHelipay/'
    import { getOrganId, getOrganPath, handleBuildTreeDataStruct , getSelectedNodes , getSelectedNodesObject} from '@/api/utils'

    import { doQueryBy as doQueryMerchantList  } from '@/api/Merchant/'
    import { querySubordinateOrgan } from '@/api/Organ'

    import SelectTree from '@/components/TreeSelect/index.vue'  

    export default { 
        components: {
            SelectTree
        },
        data() {
            return {
                list: null,
                listLoading: true,
                total: 5,
                currentPage: 1,
                pageSize: 10,
                dialogFormVisible: false,
                addForVisible: false,
                loading: false,
                form: {
                    id:'',
                    firstClassMerchantNo:'',
                    organId:'',
                    organPath:'',                    
                    feeValueRate:'',
                    minFee:'',
                    organName:'',
                    organParentId:'',
                    merchantId:'',
                    tradeSignKey:'',
                    tradeEncodeKey:'',
                    settlementSignKey:'',
                    settlementEncodeKey:'',
                    scanSignKey:'',
                    scanEncodeKey:'',
                    publicSignKey:'',
                    publicEncodeKey:'',
                    payCenterSignKey:'',
                    payCenterEncodeKey:'',
                    isReferenceToParent:'',
                    isDeleted:'',
                    createBy:'',
                    createDate:'',
                    updateBy:'',
                    updateDate:'',
                    remark:''
                },
                // 新增or编辑弹框标题(根据点击的新增or编辑按钮显示不同的标题)
                titleMap: {
                    add: '新增',
                    edit: '编辑'
                },
                // 新增和编辑弹框标题
                dialogStatus: '',
            
                query: {
                    params: {
                        id:'',
                        firstClassMerchantNo:'',
                        organId:'',
                        organPath:'',
                        feeValueRate:'',
                        minFee:'',
                        organName:'',
                        organParentId:'',
                        merchantId:'',
                        tradeSignKey:'',
                        tradeEncodeKey:'',
                        settlementSignKey:'',
                        settlementEncodeKey:'',
                        scanSignKey:'',
                        scanEncodeKey:'',
                        publicSignKey:'',
                        publicEncodeKey:'',
                        payCenterSignKey:'',
                        payCenterEncodeKey:'',
                        isReferenceToParent:'',
                        isDeleted:'',
                        feeValueRate:'',
                        minFee:'',
                        createBy:'',
                        createDate:'',
                        updateBy:'',
                        updateDate:'',
                        remark:''
                    },
                    treeSelect:{
                        isClearable: true, // 可清空（可选）
                        isAccordion: true, // 可收起（可选）
                        valueId: null, // 初始ID（可选）
                        props: { // 配置项（必选）
                            value: 'id',
                            label: 'organName',
                            children: 'children',
                            title: '组织'
                        // disabled:true
                        },
                        optionData: [{ id: '1', parentId: '2', organName: '平台', children: [] }]


                    },
                    timeValue: '',
                    options: [{
                        value: '1',
                        label: '黄金糕'
                    }, {
                        value: '2',
                        label: '双皮奶'
                    }],
                    value: '',
                    merchantOptions:[]
                }
            }
        },
        created() {
            this.initOrganTree()
            this.fetchData()
        },
        methods: {

            remoteMethod(name ){
                this.listLoading = true;
                doQueryMerchantList({organPath:getOrganPath(), name:name }).then(response => {
                    const data = response.data 
                    const merchantList = data.data;
                    let merchantOptions = [];

                    for(let i =0; i < merchantList.length; i++){
                        merchantOptions.push({label:merchantList[i].name, value:merchantList[i].id})
                    }
                    this.query.merchantOptions = merchantOptions
                    this.listLoading = false

                })

            },
            fetchData() {
                this.listLoading = true
                getList(this.query.params , this.currentPage, this.pageSize).then(response => {
                    const data = response.data
                    this.total = data.totalCount
                this.pageSize = data.pageSize
                this.currentPage = data.currentPage
                this.list = data.entities
                this.listLoading = false
            })
            },
            handleSizeChange(val) {
                this.currentPage = 1
                this.pageSize = val
                this.fetchData()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.fetchData()
            },
            // 新增
            handleAdd() {
                // 显示弹框
                this.dialogFormVisible = true
                // 新增弹框标题
                this.dialogStatus = 'add'

                this.form.id=''
                this.form.firstClassMerchantNo='',
                this.form.organName=''
                this.form.organParentId=''
                this.form.merchantId=''
                this.form.tradeSignKey=''
                this.form.tradeEncodeKey=''
                this.form.settlementSignKey=''
                this.form.settlementEncodeKey=''
                this.form.scanSignKey=''
                this.form.scanEncodeKey=''
                this.form.publicSignKey=''
                this.form.publicEncodeKey=''
                this.form.payCenterSignKey=''
                this.form.payCenterEncodeKey=''
                this.form.isReferenceToParent=''
                this.form.isDeleted=''
                this.form.createBy=''
                this.form.createDate=''
                this.form.updateBy=''
                this.form.updateDate=''
                this.form.remark=''
                this.addForVisible = false
            },
            // 编辑
            handleEdit(index, row) {
                console.log(index)
                console.log(row)
                this.form.id=row.id
                this.form.firstClassMerchantNo=row.firstClassMerchantNo,
                this.form.organId=row.organId
                this.form.organPath=row.organPath
                this.form.organName=row.organName
                this.form.organParentId=row.organParentId
                this.form.merchantId=row.merchantId
                this.form.tradeSignKey=row.tradeSignKey
                this.form.tradeEncodeKey=row.tradeEncodeKey
                this.form.settlementSignKey=row.settlementSignKey
                this.form.settlementEncodeKey=row.settlementEncodeKey
                this.form.scanSignKey=row.scanSignKey
                this.form.scanEncodeKey=row.scanEncodeKey
                this.form.publicSignKey=row.publicSignKey
                this.form.publicEncodeKey=row.publicEncodeKey
                this.form.payCenterSignKey=row.payCenterSignKey
                this.form.payCenterEncodeKey=row.payCenterEncodeKey
                this.form.isReferenceToParent=row.isReferenceToParent
                this.form.isDeleted=row.isDeleted
                this.form.createBy=row.createBy
                this.form.createDate=row.createDate
                this.form.updateBy=row.updateBy
                this.form.updateDate=row.updateDate
                this.form.remark=row.remark
                this.addForVisible = true
                // 显示弹框
                this.dialogFormVisible = true
                // 编辑弹框标题
                this.dialogStatus = 'edit'
            },
            handleDelete(index, row) {
                console.log(index)
                console.log(row)

                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    doDelete(row.id).then(response => {
                    const data = response.data
                    console.log(data)
                    if(data.status == 1){
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        })
                        this.fetchData();
                    }else if(data.status == 403){
                        this.$message({
                            type: 'warning',
                            message: data.description
                        })
                }else{
                    this.$message({
                        type: 'info',
                        message: '操作失败!'
                    })
                }
            })
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
            },
            handleEditSave() {
                debugger
                this.form.organId = getOrganId()
                this.form.organPath = getOrganPath()
                doEdit(this.form).then(response => {
                    debugger
                            console.log(response)
                    const data = response.data
                    if(data.status){
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        })
                     this.fetchData();
                    }else{
                        this.$message({
                            type: 'info',
                            message: '操作失败!'
                        })
                    }
                    this.listLoading = false
                    this.dialogFormVisible = false
            })
            },
            handleReset() {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },            
            initOrganTree() {
              this.listLoading = true
              querySubordinateOrgan({ organPath: getOrganPath() }).then(response => {
                console.log(response)
                const data = response.data.data
                this.query.treeSelect.optionData = handleBuildTreeDataStruct(data, 'id', 'parentId')
                this.listLoading = false
              })
            },
            getValue(value) {
              this.query.treeSelect.valueId = value

              if( value ){
                this.query.params.organPath = value.organPath
              } else {
                this.query.params.organPath = getOrganPath()
              }
              console.log(this.valueId)
            }
        }
    }
</script>
